<style lang="scss">
@import './index.scss';
</style>
<template>
  <div class="purse">
    <div class="top">
      <van-nav-bar title="我的钱包" left-arrow @click-left="router.back()" />
      <div class="text-box">
        <div class="texts">
          <ul>
            <li>
              <h1>{{ Hb }}</h1>
            </li>
            <li>
              <h4>H币</h4>
            </li>
          </ul>
        </div>
        <p style="font-size: 12px; color: white; margin-top: 10px">满2000H币可提现</p>
      </div>
      <div class="money">
        <van-button
          style="width: 60px; height: 36px; font-size: 14px; color: #3087ea"
          size="small"
          @click="tx"
          >提现</van-button
        >
        <van-button
          style="width: 60px; height: 36px; font-size: 14px; color: #3087ea"
          size="small"
          @click="cz"
          >充值</van-button
        >
      </div>
    </div>
    <div class="con">
      <!-- 消费记录 -->
      <div
        v-for="(item, index) in HbRecord"
        :key="index"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
        "
      >
        <div>
          <h3>{{ item.remark ? item.remark : '问诊咨询' }}</h3>
          <h5>{{ item.createTime }}</h5>
        </div>
        <div>
          <h3 v-if="item.changeNum > 0"  style="color: rgb(193, 7, 7)">{{ item.changeNum }}H币</h3>
          <h3 v-else style="color: #3087ea">{{ item.changeNum }}H币</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { showNotify, closeNotify } from 'vant'
import { request } from '../../axios/request'

const router = useRouter()
const result = ref(localStorage.getItem('result'))

// 判断
const someAsyncFunction = () => {
  try {
    // const result = await somePromise();
    if (result.value) {
      console.log('已登录')
      setTimeout(closeNotify, 3000) // 3 秒后关闭通知
    } else {
      console.log('未登录')
      router.push('/login')
      setTimeout(closeNotify, 3000) // 3 秒后关闭通知
    }
  } catch (error: any) {
    showNotify({ type: 'danger', message: '发生错误：' + error.message })
    setTimeout(closeNotify, 3000) // 3 秒后关闭通知
  }
}
someAsyncFunction()

// 判断是否充值
const flage = ref(false)
// 提现 -
const tx = () => {
  flage.value = false
  router.push('/withdrawal')
}
// 充值 +
const cz = () => {
  flage.value = true
  router.push('/recharge')
}

// 拿取userId, sessionId
const userId = ref(JSON.parse(localStorage.getItem('userId') || ''))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId')|| '') )

// H币钱包
const Hb = ref()
const wallet = async () => {
  await request
    .get('/api/health/user/verify/v1/findUserWallet', {
      headers: {
        userId: userId.value as number,
        sessionId: sessionId.value as string
      }
    })
    .then((res) => {
      console.log(res.data)
      let { result, message, status } = res.data
      if (status === '0000') {
        console.log(message)
        Hb.value = result
      }
    })
}
wallet()

// 钱包消费记录
const HbRecord = ref()
const walletRecord = async () => {
  await request
    .get('/api/health/user/verify/v1/findUserConsumptionRecordList', {
      params: {
        page: 1,
        count: 15
      },
      headers: {
        userId: userId.value as number,
        sessionId: sessionId.value as string
      }
    })
    .then((res) => {
      console.log(res.data)
      let { result, message, status } = res.data
      if (status === '0000') {
        console.log(message)
        HbRecord.value = result
        // 计算年月日
        HbRecord.value.forEach((item: any, index: number) => {
          console.log(item.createTime);
          HbRecord.value[index].createTime = dayjs(item.createTime).format('YYYY-MM-DD')
        })
      }
    })
}
walletRecord()
</script>
